<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item.image" class="swiper-image" mode="aspectFill" />
			</swiper-item>
		</swiper>

		<uni-section title="留言列表">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<uni-grid :column="5">
							<uni-grid-item v-for="(item, index) in typelist" :key="index">
								<image :src="item.icon" class="grid-icon" mode="aspectFill" />
							</uni-grid-item>
						</uni-grid>
					</view>
				</swiper-item>
				
				<swiper-item>
					<view class="swiper-item">
						<uni-grid :column="5">
							<uni-grid-item v-for="(item, index) in typelist" :key="index">
								<image :src="item.icon" class="grid-icon" mode="aspectFill" />
							</uni-grid-item>
						</uni-grid>
					</view>
				</swiper-item>
			</swiper>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						image: '../../static/images/school1.jpg'
					},
					{
						image: '../../static/images/school2.jpg'
					},
					{
						image: '../../static/images/school3.jpg'
					}
				],
				typelist: [{
						icon: '../../static/image/telephone.png'
					},
					{
						icon: '../../static/image/announcement.png'
					},
					{
						icon: '../../static/image/classmate.png'
					},
					{
						icon: '../../static/image/leaveword.png'
					},
					{
						icon: '../../static/image/news.png'
					}
				]

			}
		},
		methods: {

		},
		onLoad() {
			// 注意：onLoad 不是一个箭头函数，因为它需要访问组件的 this 上下文  
			uni.onTabBarMidButtonTap(function(e) {
				console.log(e)
				// 这里你可以添加处理中间按钮点击的逻辑  
			})
		}
	}
</script>

<style>
	.swiper-image {
		width: 100%;
		height: 300rpx;
		/* 你可以根据需要调整图片的高度 */
	}

	.custom-section {
		/* 假设你需要给 uni-section 添加一些额外的样式来确保角标的位置正确 */
		position: relative;
		/* 或者其他适合的值 */
		padding-left: 40px;
		/* 为角标留出空间 */
	}

	.custom-section::before {
		content: '';
		/* 伪元素的内容 */
		position: absolute;
		top: 10px;
		/* 调整位置以匹配你的设计 */
		left: 0;
		width: 20px;
		/* 角标的宽度 */
		height: 20px;
		/* 角标的高度 */
		background-color: #00aaff;
		/* 蓝色背景 */
		border-radius: 50%;
		/* 圆角效果，使角标看起来像圆形 */
		/* 可以添加其他样式，如边框、阴影等 */
	}
	
	.grid-icon {  
			/* 根据需要调整图标的大小和样式 */  
			width: 50px; /* 举例 */  
			height: 50px; /* 举例 */  
			margin: 10px; /* 举例，增加图标之间的间距 */  
		}  
</style>